<template>
    <div class="goods">
        <div class="top">
            <div v-for="(item,index) in this.static" :key="index" @click="go(item)"
           
             >{{ item.name }}({{ item.num }})</div>
        </div>
        <div class="conent">
            <!-- 搜索条件 -->
            <el-form :inline="true" :model="search"  ref="searchForm" label-width="100px" class="search" >
                <el-form-item label="门店名称" prop="shopName">
                    <el-input v-model="search.shopName" placeholder="门店名称"></el-input>
                </el-form-item>
                <el-form-item label="门店编码" prop="shopId">
                    <el-input v-model="search.shopId" placeholder="门店编码"></el-input>
                </el-form-item>
                <el-form-item label="商品码" prop="produceId">
                    <el-input v-model="search.produceId" placeholder="商品码"></el-input>
                </el-form-item>
                <div class="search-right">
                    <el-button @click="search.current=1;resetForm('searchForm')">重置</el-button>
                    <el-button type="primary" icon="el-icon-zoom-in" @click="search.current=1;getGoods()">查询</el-button>
                </div>
            </el-form>
            <div class="operation">
                <el-button type="primary"><i class="el-icon-upload2"></i> 批量启用</el-button>
                <el-button type="primary"><i class="el-icon-download"></i> 批量禁用</el-button>
                <el-button type="danger" @click="del()"> <i class="el-icon-delete"></i>批量删除</el-button>
                <el-button style="background-color: #172b7e; color:white;"><i class="el-icon-setting"></i>设置门店库存</el-button>
            </div>
            <!-- 商品数据 -->
            <el-table :data="goods" style="width: 100%" ref="json_data" @selection-change="handleSelectionChange" border>
                <el-table-column type="selection"   width="55">
                </el-table-column>
                <el-table-column  label="商品图片" width="80">
                    <template slot-scope="scope">
                        <img v-if="scope.row.gallery" :src="scope.row.gallery" style="width:100%  " alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="productName" label="商品名称" >
                </el-table-column>
                <el-table-column prop="price" label="价格" >
                </el-table-column>
                <el-table-column prop="stock" label="库存">
                </el-table-column>
                <el-table-column prop="" label="月售(份)">
                </el-table-column>
                <el-table-column prop="sku" label="条形码(SKU)">
                </el-table-column>
                <el-table-column prop="produceId" label="商品编码">
                </el-table-column>
                <el-table-column prop="shopName" label="门店名称">
                </el-table-column>
                <el-table-column prop="shopId" label="门店编码">
                </el-table-column>
                <el-table-column label="是否启用">
                    <template slot-scope="scope"> 
                    <div  @click="handleEdit(scope.row)">
                        <el-switch  v-model="scope.row.online"></el-switch>
                    </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="editlist(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" @click="open(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 页码操作 -->
            <el-pagination width="100%" class="page"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="pagination.current"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagination.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import {GetGoods, JtGoods,DelGoods} from '@/api/shop'
export default {
    data(){
        return {
            goods:[],  //商品列表
            search: {
                online:1,  //上线
                produceId:'', //商品码
                shopId:'', //门店编码
                shopName:'', //门店名称
                current:1,  //当前页
                size:10,  //每页多少条
                order:'desc',  //降序
            },
            edit:{
                id:'',
                online:'',
            }, 
            selectList:[], //选中
            pagination:{}, //分页信息
            current:1, //当前页码
            static:[],  //静态数据
            index:0, //
        }
    },
    created(){
        this.getGoods()
    },
    methods:{
        // // 批量启用
        // totrue(){
        //     this.selectList.forEach(item=>{})
        // },
        // 批量删除
        del(){
            this.selectList.forEach(item=>{
                DelGoods(item.id)
                .then(res=>{
                    if(res.data&&res.data.code==0){
                        this.$message({
                            type:'success',
                            message:res.data.msg
                        })
                        console.log(res);
                    }
                    
                })
            })
            this.getGoods()

        },
        // 编辑
        editlist(row){
            console.log(row);
            this.$router.push({path:'/admin/produce/editProduce/:id',query:row})
        },
        // 删除
        open(id){
            this.$confirm('正在删除用户，删除后该用户将无法登录！是否继续？', '注意', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                DelGoods(id)
                .then(res=>{
                    if(res.data&&res.data.code==0){
                        this.$message({
                            type:'success',
                            message:res.data.msg
                        })
                        this.getGoods()
                        console.log(res);
                    }
                    
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            
        },
        // 最上面切换
        go(flag){
            this.search.online=flag.value
            this.getGoods()
        },
        // 上线下线
        handleEdit(row){
            console.log(row);
            this.edit.id=row.id;
            if(row.online==1){
                this.edit.online=0
            }else{
                this.edit.online=1
            }
            
        },
        // 重置表单
        resetForm(formName){
            this.$refs[formName].resetFields();
            this.getGoods()
        },
        // 页码操作
        handleSizeChange(val) {
            this.search.size=val;
            this.getGoods();
        },
        handleCurrentChange(val) {
            this.search.current=val;
            this.getGoods()
        },
        // 商品行选中
        handleSelectionChange(){
            this.selectList=this.$refs.json_data.selection
            console.log(this.$refs.json_data.selection);
        },
        // 获取商品列表
        getGoods(){
            GetGoods(this.search)
            .then(res=>{
                this.goods=res.data.data
                this.pagination=res.data.pagination
                this.pagination.current = res.data.pagination.current*1
                this.pagination.size = res.data.pagination.size*1
                // this.goods.map(item=>{
                //     if(item.online==1){
                //         return item.online=false
                //     }else{
                //         return item.online=true
                //     }
                // })
                console.log(res);
            })
            JtGoods()
            .then(res=>{
                console.log(res);
                this.static=res.data.list
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.active{
    color:aqua
}
.conent{
    padding: 15px;
    background-color: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.operation{
    padding: 10px 0;
}
.page{
    height: 60px;
    display: flex;
    align-items: center;
    background-color: white;
    justify-content: flex-end;
    padding-right: 70px;
}
.search-right{
    position: absolute;
    right: 50px;
    top: 40px;
}
.search{
    background-color: white;
    padding: 10px 0;
    position: relative;
}
.top{
    background-color: white;
    height: 60px;
    border-bottom: 1px solid #f7f6fb;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    >div{
        width: 150px;
        padding: 0 20px;
    }

}
</style>